<template>
  <div class="viewport view-sign-up">
    <r-logo class="logo"/>
    <div class="box">
      <input type="number" v-model="mobile" placeholder="请输入手机号"/>
      <input type="text" v-model="verifyCode" placeholder="请输入验证码"/>
      <r-btn-countdown class="btn-countdown" @click="sendVerifyCode" v-model="count"/>
      <r-btn primary block :disabled="signDisabled" @click="signUp">注册</r-btn>

      <div class="bar">
        <p>"注册"代表您已同意我们的<router-link to="/terms" class="link-terms">《服务协议》</router-link>。</p>
      </div>
    </div>

  </div>
</template>
<script>
import RLogo from '../components/r-logo'
import RBtn from '../components/r-btn'
import RBtnCountdown from '../components/r-btn-countdown'

export default {
  name: 'view-sign-up',
  components: {
    RLogo,
    RBtn,
    RBtnCountdown
  },
  data () {
    return {
      mobile: '',
      verifyCode: '',
      count: false,
      signDisabled: false
    }
  },
  methods: {
    signUp () {
      //
    },
    sendVerifyCode () {
      this.count = true
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/index";

  .view-sign-up {
    .box {
      width: 300px;
      margin: 5px auto;
      border-radius: 2px;
    }

    input {
      line-height: 24px;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      box-sizing: border-box;
      width: 100%;
      margin: 6px 0;
    }

    .btn-countdown {
      float: right;
      height: 40px;
      margin-top: -47px;
      @extend %left-before-thin;

      &::before {
        height: 60%;
        top: 20%;
        background-color: $color-line-weight;
      }
    }

    .bar {
      @extend %flex-justify;
      margin: -10px 0 10px;

      p {
        font-size: 13px;
        margin: 5px 0;
      }
    }

    .link-terms {
      color: $color-primary;
      text-decoration: underline;
    }
  }
</style>
